@import "./reset";
@import "./common";
// 头部
header {
    .top {
        z-index: 100;
        .Back {
            width: vw(125);
            height: vw(60);
            border: vw(4) solid rgb(255, 147, 68);
            border-radius: vw(20);
            text-align: center;
            h1 {
                font-size: vw(24);
                font-weight: normal;
                line-height: vw(52);
            }
        }
        .my {
            font-size: vw(26);
            h2 {
                font-weight: normal;
            }
        }
        .message {
            line-height: vw(126);
            position: relative;
            &::after {
                content: "99";
                width: vw(30);
                height: vw(30);
                line-height: vw(30);
                text-align: center;
                font-size: vw(12);
                color: #fff;
                background: red;
                border-radius: 50%;
                position: absolute;
                top: vw(25);
                right: 0;
            }
            img {
                width: vw(64);
                height: vw(44);
                vertical-align: middle;
            }
        }
    }
    // 点击登录
    .register {
        width: vw(710);
        margin: 0 auto;
        @include display-fx;
        position: relative;
        &::before,
        &::after {
            content: "";
            border: vw(35) solid transparent;
            border-left-color: black;
            position: absolute;
            top: vw(50);
            right: vw(20);
        }
        &::after {
            border-left-color: #fff;
            right: vw(30);
        }
        div:first-of-type {
            width: vw(170);
            height: vw(170);
            border-radius: 50%;
            background: url(../image/my/gamepic10.jpg) no-repeat;
            background-size: cover;
        }
        div:last-of-type {
            width: vw(512);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            font-size: vw(30);
            p:first-of-type {
                a {
                    color: black;
                    &:hover {
                        color: rgb(255, 147, 68);
                    }
                }
            }
            p:last-of-type {
                color: rgb(206, 206, 206);
            }
        }
    }
    // 我的列表
    .list {
        width: vw(710);
        margin: vw(28) auto;
        display: flex;
        justify-content: space-between;
        li {
            a {
                width: vw(195);
                height: vw(150);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: vw(30);
                color: black;
            }
        }
        li:first-of-type {
            background: rgb(178, 224, 160);
            img {
                width: vw(100);
                height: vw(80);
            }
        }
        li:nth-of-type(2) {
            background: rgb(160, 220, 224);
            img {
                width: vw(80);
                height: vw(80);
            }
        }
        li:last-of-type {
            background: rgb(224, 183, 160);
            img {
                width: vw(125);
                height: vw(80);
            }
        }
    }
}
// 我的内容
section {
    // 更多导航栏
    .more {
        &:hover {
            background-color: rgb(245, 209, 156);
        }
        .left{
            img{
                margin-right: vw(25);
            }
        }
    }
    .more:nth-of-type(4) {
        .left {
            img {
                width: vw(80);
                height: vw(55);
                margin-right: 0;
            }
        }
    }
    // 按钮
    .but {
        width: vw(538);
        margin: vw(35) auto;
        @include display-fx;
        button {
            width: vw(145);
            height: vw(75);
            line-height: vw(75);
            font-size: vw(25);
            color: #fff;
            text-align: center;
            background: rgb(255, 147, 68);
            border-radius: vw(37.5);
            &:hover {
                background-color: red;
            }
        }
    }
}